<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/head :: head"></head>
<body class="gray-bg">
<form id="ec" action="/role" method="post">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <table class="table form-table margin-bottom10">
                            <tr>
                                <td>
                                    <input type="text" name="roleName" th:value="${#maps.containsKey(filters,'roleName')}? ${filters.roleName}:''" placeholder="角色名称" class="input-sm form-control"/>
                                </td>
                            </tr>
                        </table>
                        <div>
                            <!--
                            <button id="alertBtn" type="button" class="btn btn-sm btn-primary alert">alert</button>
                            <button type="button" class="btn btn-sm btn-primary load">load</button>
                            <button type="button" class="btn btn-sm btn-primary confirm">confirm</button>
                            <button type="button" class="btn btn-sm btn-primary dialog">dialog</button>
                            <button type="button" class="btn btn-sm btn-primary openWin">openWin</button>
                            -->
                            <button type="submit" class="btn btn-sm btn-primary create">搜索</button>
                            <button type="button" class="btn btn-sm btn-primary create">新增</button>
                        </div>

                        <table class="table table-striped table-bordered table-hover dataTables-example">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>角色名称</th>
                                <th>角色编码</th>
                                <th>描述</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="gradeX" th:each="item,it : ${page.list}">
                                <td class="text-center" th:text="${it.count}">11</td>
                                <td th:text="${item.roleName}">22</td>
                                <td th:text="${item.roleCode}">33</td>
                                <td th:text="${item.description}">33</td>
                                <td th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}" >33</td>
                                <td>
                                    <!--将id值赋值给临时属性，便于jQuery获取id-->
                                    <a class="edit" th:attr="data-id=${item.id}">修改</a>
                                    <a class="delete" th:attr="data-id=${item.id}">删除</a>
                                </td>
                            </tr>


                            </tbody>
                        </table>

                        <div class="row" th:include="common/pagination :: pagination"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>


<script th:inline="javascript">
    /* jQuery 框架：  前端框架，主要功能： 选择器，常用函数，提交ajax请求
    $(function () {  //相当与页面的onload事件

    })*/

    $(function(){

        //给页面元素绑定相应的事件。
        // $(".alert") 表示样式类选择器，查找页面使用使用了alert样式的元素
        // $("#id")    表示id选择器，根据页面元素的id属性值获取元素。类似 document.getElementById("id");
        /*$(".alert").on("click",function () {
            opt.alert("测试alert")
        });
        $(".load").on("click",function () {
            opt.load();
        });
        $(".confirm").on("click",function(){
            opt.confirm("","删除操作需要确认");
        });
        $(".dialog").on("click",function () {
            opt.dialog("测试提示框",1);
        });
        $(".openWin").on("click",function () {
            opt.openWin("/role","测试打开弹出窗口",580,430);
        });*/

        $(".create").on("click",function () {
            opt.openWin("/role/create","新增",580,430)
        })

        //给所有引用"edit"名称样式的元素增加单击事件
        $(".edit").on("click",function () {
            //$(this)  // this表示当前触发事件页面元素，dom类型。$()将某个dom元素转换为jquery对象。这样就可以调用jquery函数
            var id = $(this).attr("data-id");
            opt.openWin("/role/edit/"+id,"修改",580,430)
        });

        $(".delete").on("click",function () {
            var id = $(this).attr("data-id");
            opt.confirm("/role/delete/"+id,"确认要删除吗?");
        });
    });
</script>


</body>
</html>